{% extends "baseMenuMapa.html" %}

{% block extras %}
<table style="text-align: left; height: 100%; width: 100%;">
  <tr style="text-align: left; height: 20%; width: 100%;">
  	<td><form name = "formPrediccion" action="" method="post">{% csrf_token %}
            <table>
            	<tr><td> Predicciones para la parada {{ parada }} de la linea {{ linea }}     </td> 
                <td><BUTTON type="submit" name="action" value="prediction">Volver a elegir</BUTTON></td></tr>
            </table>
        </form>
    </td>
  </tr>
  {% if error %} <tr><td style="text-align: center;"><font color="red" size=2>Error: {{ error }}</font></td></tr>{% endif %}
  {% if timeStamp %}<tr><td><a>Tiempos Calculados a {{ timeStamp }}</a></td></tr>{% endif %}
  <tr><td align=center >
    <div id="tableContainer" class="tableContainer">
      {% if predicciones %}
      <table border="0" cellpadding="0" cellspacing="0" width="100%" class="scrollTable">
      	<thead class="fixedHeader">
			<tr>
				<th><a href="#">Colectivo</a></th>
				<th><a href="#">Tiempo estimado [s]</a></th>
			</tr>
		</thead>
		<tbody class="scrollContent">
      {% for bus in predicciones %}
        <tr>
        	<td>{{ bus.bus }}</td>
        	<td>{{ bus.time }}</td>
       	</tr>
      {% endfor %}
      
      </tbody></table>
      
    {% endif %}
</div></td></tr>
</table>
{% endblock %}

{% block marcas %}   
    {% if route %}
    	{% if stopList %}
    		{% for parada in stopList %}
    			markerPosition = new google.maps.LatLng({{ parada.latitud }},{{ parada.longitud}});
       			marker = new google.maps.Marker({
        			map:map,
        			draggable:false,
        			position: markerPosition,
        			icon: markerImage
    			});
        
    			google.maps.event.addListener(marker, 'click', toggleBounce); //Click sobre el marker
	
    		{% endfor %}		
    	{% endif %} 
    	
    	var flightPlanCoordinates = [
	      {% for stop in stopList %}
		    new google.maps.LatLng({{ stop.latitud }},{{ stop.longitud}}),
	      {% endfor %}
		];
		var flightPath = new google.maps.Polyline({
		    path: flightPlanCoordinates,
		    strokeColor: "#FF0000",
		    strokeOpacity: 1.0,
		    strokeWeight: 2
		});
	
	 	flightPath.setMap(map);
    {% endif %}
    
    /* La lista de posiciones de los colectivos - corregir
    {% if listaUnidades %}
    var point2 = new GLatLng(0,0);
    {% for unidad in listaUnidades %}
	point2 = new GLatLng({{ unidad.latitud }},{{ unidad.longitud}} );
    marcador2 = new GMarker(point2, markerOptions2);
	
    google.maps.Event.addListener(marcador2, 'click', function(overly, latlng, overlaylatlng) { //funcion que muestra la ventana de informacion
        map.openInfoWindowHtml(new GLatLng({{ unidad.latitud }},{{ unidad.longitud}} ), "<div style='font-size: 8pt; font-family: verdana'><p>Linea : {{ parada.linea}} </p><p>Orden: {{ parada.orden }} </p><p>Latitud: {{ unidad.latitud }} </p><p>Longitud:{{ unidad.longitud}} </p></div>"); 
    });
    map.addOverlay(marcador2);   
    
    {% endfor %}
    {% endif %} Para cuando se pase las posiciones de los colectivos
    */
{% endblock %}

{% block extraScripts %}<script>setTimeout('document.location.reload()',60000); </script>{% endblock %}
